<template>
  <div class="edit">
    <el-row class="row">
      <el-col class="c1">
        <el-descriptions v-loading="loading" :column="2">
          <el-descriptions-item label="用户名">
            {{ form.username }}
            <el-button v-if="power.includes('user.report')" class="report" type="text" icon="el-icon-warning-outline" @click="reportUser"
              >举报违规</el-button
            >
          </el-descriptions-item>
          <el-descriptions-item label="邮箱地址"> {{ form.mail }} </el-descriptions-item>
        </el-descriptions>
        <el-row class="row2" :gutter="16">
          <el-col :span="12">
            <div class="drag-box-item">
              <div class="item-title">
                所有权限
                <span>
                  <el-button
                    v-if="power.includes('user.power')"
                    type="text"
                    size="medium"
                    icon="el-icon-circle-plus-outline"
                    @click="allPower"
                    >全部</el-button
                  >
                </span>
              </div>
              <el-scrollbar class="item-ul">
                <draggable
                  v-model="powerPool"
                  filter=".forbid"
                  :move="moveHandle"
                  :options="poolDragOptions"
                  class="draggable"
                  :disabled="!power.includes('user.power')"
                >
                  <div v-for="item in powerPool" class="drag-list" :class="{ active: form.power.includes(item) }" :key="item">
                    <span class="name">
                      {{ item }}
                    </span>
                    <span class="operation">
                      <el-button
                        v-if="power.includes('user.power')"
                        type="text"
                        icon="el-icon-circle-plus-outline"
                        @click="add(item)"
                      ></el-button>
                    </span>
                  </div>
                </draggable>
              </el-scrollbar>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="drag-box-item">
              <div class="item-title">
                用户权限
                <span>
                  <el-button type="text" v-if="power.includes('user.power')" size="medium" icon="el-icon-delete" @click="emptyPower"
                    >清空</el-button
                  >
                </span>
              </div>
              <el-scrollbar class="item-ul">
                <draggable v-model="form.power" filter=".forbid" :move="moveHandle" :options="dragOptions" class="draggable">
                  <div v-for="item in form.power" class="drag-list" :key="item">
                    <span class="name">
                      {{ item }}
                    </span>
                    <span class="operation">
                      <el-button v-if="power.includes('user.power')" type="text" icon="el-icon-circle-close" @click="del(item)"></el-button>
                    </span>
                  </div>
                </draggable>
              </el-scrollbar>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col class="c2">
        <el-image class="cover" cropper :src="form.portrait | imgurl" />
        <div class="operation" @click.stop>
          <el-button v-if="power.includes('user.report')" class="report" type="text" icon="el-icon-warning-outline" @click="reportPortrait">
            举报违规
          </el-button>
          <span v-else style="color: #666; font-size: 14px; cursor: pointer">您无权操作</span>
        </div>
      </el-col>
    </el-row>
    <div class="center-text">
      <el-button type="success" @click="save"> 保 存 </el-button>
      <el-button v-if="form.id" type="warning" @click="init"> 恢 复 </el-button>
      <el-button @click="cancel"> 取 消 </el-button>
    </div>
  </div>
</template>

<script>
import { userPower, userFromid, reportName, reportPortrait } from '@/api/user'
import draggable from 'vuedraggable'
import powerPool from '../data/powers'
import { mapGetters } from 'vuex'

export default {
  components: {
    draggable,
  },
  data() {
    return {
      form: {},
      powerPool,
      poolDragOptions: {
        animation: 120,
        scroll: true,
        group: {
          name: 'list',
          pull: 'clone',
        },
        sort: false,
        ghostClass: 'ghost-style',
      },
      dragOptions: {
        animation: 120,
        scroll: true,
        group: 'list',
        sort: false,
        ghostClass: 'ghost-style',
      },
    }
  },
  computed: {
    ...mapGetters('user', ['power']),
  },
  methods: {
    async init() {
      const { id } = this.query
      if (id === 'new') return
      this.loading = true
      const data = await userFromid({ id })
      if (data.code === 431) return this.$router.replace({ name: '404' })
      if (data.code !== 200) return this.$message.error('获取用户详情失败,错误码:' + data.code)
      this.loading = false
      this.form = data.data
    },
    // 拖动钩子
    moveHandle({ draggedContext: { element }, relatedContext: { list } }) {
      if (list && list.some((e) => e === element)) return false
    },
    // 保存
    async save() {
      this.loading = true
      const data = await userPower(this.form)
      if (data.code !== 200) return this.$message.error('保存失败,稍后重试,错误码:' + data.code)
      this.$message.success('保存成功')
      this.$router.push({ name: 'user-exhibit' })
    },
    /**取消 */
    cancel() {
      this.$router.push({ name: 'user-exhibit' })
    },
    /**举报用户名 */
    reportUser() {
      this.$confirm('该操作将重置用户名为"违规昵称xxxxxxxx"', '举报用户名？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(async () => {
          const data = await reportName(this.form)
          if (data.code !== 200) return this.$message.error('举报失败,错误码:' + data.code)
          this.$message.success('举报成功')
          this.init()
        })
        .catch(() => {})
    },
    /**举报用户头像 */
    reportPortrait() {
      this.$confirm('该操作将重置用户头像为"default.jpg"', '举报用户头像？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(async () => {
          const data = await reportPortrait(this.form)
          if (data.code !== 200) return this.$message.error('举报失败,错误码:' + data.code)
          this.$message.success('举报成功')
          this.init()
        })
        .catch(() => {})
    },
    /**删除权限 */
    del(item) {
      const { power } = this.form
      power.splice(power.indexOf(item), 1)
    },
    /**增加权限 */
    add(item) {
      const { power } = this.form
      if (!power.includes(item)) power.push(item)
    },
    /**全部权限 */
    allPower() {
      this.form.power = [...this.powerPool]
    },
    /**清空权限 */
    emptyPower() {
      this.form.power = []
    },
  },
  watch: {
    '$route.params': {
      immediate: true,
      deep: true,
      handler(value) {
        console.log(value)
        this.query = { ...value }
        this.init()
      },
    },
  },
}
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  .c1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    .report {
      margin-left: 16px;
      padding: 1px 6px;
    }
    .row2 {
      flex: 1;
      .drag-box-item {
        height: 100%;
        background-color: #eff1f5;
        border-radius: 6px;
        border: 1px #e1e4e8 solid;
        box-sizing: border-box;
        .item-title {
          padding: 8px 8px 8px 12px;
          font-size: 14px;
          line-height: 1.5;
          color: #24292e;
          font-weight: 600;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .describe {
            font-weight: initial;
            color: #8492a6;
          }
        }
        .item-ul {
          box-sizing: border-box;
          flex: 1;
        }
        .draggable {
          min-height: 214px;
        }
        .drag-list {
          border: 1px #e1e4e8 solid;
          display: inline-block;
          padding: 0 10px;
          height: 36px;
          margin: 8px;
          list-style: none;
          background-color: #fff;
          border-radius: 6px;
          &:hover,
          &.active {
            border: 1px solid #20a0ff;
          }
          cursor: pointer;
          -webkit-transition: border 0.3s ease-in;
          transition: border 0.3s ease-in;
          line-height: 36px;
          .name {
            color: #333;
          }
          .operation {
            color: #8492a6;
            float: right;
            .el-button {
              margin-left: 8px;
            }
          }
        }
      }
      .el-col {
        height: 100%;
      }
    }
  }
  .c2 {
    margin-left: 16px;
    width: 300px;
    height: 300px;
    position: relative;
    .operation {
      display: flex;
      background-color: rgba($color: #333, $alpha: 0.4);
      opacity: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 5;
      transition: opacity 0.2s;
      align-items: center;
      justify-content: center;
      .el-button {
        padding: 8px;
        color: #fff;
        &:hover {
          background-color: rgba($color: #333, $alpha: 0.5);
        }
      }
    }
    &:hover {
      .operation {
        opacity: 1;
      }
    }
  }
}
.cover {
  width: 300px;
  height: 300px;
}
</style>
